<template>
    <div class="left-nav">
        <div class="link-list">
            <div class="link-item" v-for="item in linkList" :key="item.id" @click="item.link ? click_link(item) : () => {}" :style="`--background-color: ${ item.id == active ? '#eff6ff' : '#00000000' }; --active-color: ${ item.id == active ? '#2563eb' : '#00000000' }`">
                <div class="link-icon">
                    <div class="icon" v-show="item.id != active" :style="`--icon: url(${ item.icon })`"></div>
                    <div class="icon" v-show="item.id == active" :style="`--icon: url(${ item.activeIcon })`"></div>
                </div>
                <div class="link-name" :style="`color: ${ item.id == active ? '#2563eb' : '#333' }`">{{ item.text }}</div>
            </div>
        </div>
        <div class="user-box">
            <div class="avatar" style="--avatar-color: #ccc"></div>
            <div class="user-info">
                <div class="username">管理员</div>
                <div class="userType">系统管理员</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { routerTo } from '@/utils/jump.js';

// 此时所处页面的id - 0表示默认的欢迎页
const active = ref(0);

// 导航栏点击逻辑
function click_link(item) {
    active.value = item.id;
    if (item.link) routerTo(item.link);
    if (item.children.length) item.open = !item.open;
}

// 左侧所有项目的路由
const linkList = ref([
    {
        id: 1,
        text: '仪表盘',
        icon: '/nav/dashboard.svg',
        activeIcon: '/nav/dashboard-active.svg',
        open: false,
        children: [],
        link: '/main/dashboard'
    },
    {
        id: 2,
        text: '项目管理',
        icon: '/nav/project-manager.svg',
        activeIcon: '/nav/project-manager-active.svg',
        open: false,
        children: [],
        link: '/main/project-manager'
    },
    {
        id: 3,
        text: '数据库管理',
        icon: '/nav/database-manager.svg',
        activeIcon: '/nav/database-manager-active.svg',
        open: false,
        children: [],
        link: '/database-manager'
    },
    {
        id: 4,
        text: '配置管理',
        icon: '/nav/config-manager.svg',
        activeIcon: '/nav/config-manager-active.svg',
        open: false,
        children: [],
        link: '/config-manager'
    },
    {
        id: 5,
        text: '服务器管理',
        icon: '/nav/server-manager.svg',
        activeIcon: '/nav/server-manager-active.svg',
        open: false,
        children: [],
        link: '/server-manager'
    },
    {
        id: 6,
        text: '进度管理',
        icon: '/nav/progress-manager.svg',
        activeIcon: '/nav/progress-manager-active.svg',
        open: false,
        children: [],
        link: '/progress-manager'
    },
    {
        id: 7,
        text: '系统设置',
        icon: '/nav/system.svg',
        activeIcon: '/nav/system-active.svg',
        open: false,
        children: [],
        link: '/system'
    }
]);

// 优化用户直接输入地址进入页面时 左侧导航栏对应位置进行高亮
onMounted(() => {
    // 获取当前页面的path
    let path = window.location.pathname;
    // 去掉最后一个 '/' 字符
    if (path[path.length - 1] == '/') path = path.slice(0, path.length - 1);
    // 匹配路由
    for (let i = 0; i < linkList.value.length; i++) {
        let item = linkList.value[i];
        if (item.link == path) {
            active.value = item.id;
            break;
        }
    }
});
</script>

<style scoped lang="less">
.left-nav {
    width: 15vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-right: 0.1vw solid rgba(0, 0, 0, 0.1);
    // box-shadow: 0 0 0.5vw rgba(0, 0, 0, 0.2);

    .link-list {
        display: flex;
        flex-direction: column;
        flex: 1;
        
        .link-item {
            box-sizing: border-box;
            width: 100%;
            height: 3vw;
            padding: 0.5vw 2vw;
            display: flex;
            align-items: center;
            gap: 1vw;
            background-color: var(--background-color);
            position: relative;

            &::after {
                content: '';
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                width: 0.25vw;
                height: 100%;
                background-color: var(--active-color);
            }

            &:hover {
                background-color: #eff6ff;
            }

            .link-icon {
                --size: 1.2vw;
                width: var(--size);
                height: var(--size);
                
                .icon {
                    --w: var(--size);
                    --h: var(--size);
                }
            }

            .link-name {
                font-size: 1;
                font-weight: 600;
            }
        }
    }

    .user-box {
        box-sizing: border-box;
        width: 100%;
        height: 4vw;
        padding: 1vw;
        display: flex;
        align-items: center;
        gap: 1vw;
        border-top: 0.1vw solid rgba(0, 0, 0, 0.1);

        .avatar {
            --size: 2.2vw;
            width: var(--size);
            height: var(--size);
            border: 0.1vw solid var(--avatar-color);
            border-radius: 50%;
            overflow: hidden;
        
            position: relative;
        
            &::before, &::after {
                content: '';
                position: absolute;
                border-radius: 50%;
                background-color: var(--avatar-color);
            }
        
            &::before {
                width: 50%;
                height: 50%;
                top: 10%;
                left: 50%;
                transform: translateX(-50%);
            }
        
            &::after {
                width: 100%;
                height: 100%;
                top: 65%;
                left: 50%;
                transform: translateX(-50%);
            }
        }

        .user-info {
            flex: 1;

            .username {
                font-size: 0.9vw;
                font-weight: 500;
            }

            .userType {
                font-size: 0.8vw;
                color: #888;
            }
        }
    }
}

</style>